<template>
	<view class="sousou_index">
		<view class="top_soso">
			<view class="skuan">
				<text style="" class="iconfont">&#xe63a;</text>
				<input @input="sousouname()" style="width: 90%;" type="text" placeholder="请输入" v-model="titles.title" />
			</view>
		</view>
		<view class="mian_body">
			<view class="">
				<text style="font-size: 13px;">热门推荐</text>
			</view>
			
			<view style="margin-top: 10px;">
				<text
				 style="margin-right: 20px; padding: 5px; display: inline-block;text-align: center; min-width: 50px; font-size: 12px; border-radius: 20px; background-color: #F7F7F7;">爆款</text>
				<text  style="margin-right: 20px; padding: 5px; display: inline-block;text-align: center; min-width: 50px; font-size: 12px; border-radius: 20px; background-color: #F7F7F7;">热卖</text>
				<text  style="margin-right: 20px; padding: 5px; display: inline-block;text-align: center; min-width: 50px; font-size: 12px; border-radius: 20px; background-color: #F7F7F7;">代言人</text>
				<text  style="margin-right: 20px; padding: 5px; display: inline-block;text-align: center; min-width: 50px; font-size: 12px; border-radius: 20px; background-color: #F7F7F7;">有料上线</text>
			</view>
			
			<view class="refs">
				<view class="Bluse" v-for="(items,index) in list" @click="toxiangQ(items)">
					<view class="bian">
						<image style="width: 140px; height: 140px; border-radius: 10px;" :src="items.logo" mode="">
						</image>
					</view>
			
					<view class="texts">
						<p style='font-size: 14px;'>{{items.title}}</p>
			
						<text style="text-decoration:line-through; font-size: 12px;">{{items.price_market}}</text>
						<text style="font-size: 21px; color: red;"><text
								style="color: red; font-size: 10px;">￥</text>{{items.price}}</text>
						</p>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles:{
					title :'',
					page:1
				},
				list:[
					
				]
			}
		},
		methods: {
			sousouname(){
				this.list = []
				this.$http.getnamelist(this.titles).then(res=>{
					for (var i = 0; i < res.data.length; i++) {
						this.list.push(res.data[i])
					}
				})
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3183672 */
		src: url('//at.alicdn.com/t/font_3183672_7auuq0uby8.woff2?t=1649825054243') format('woff2'),
			url('//at.alicdn.com/t/font_3183672_7auuq0uby8.woff?t=1649825054243') format('woff'),
			url('//at.alicdn.com/t/font_3183672_7auuq0uby8.ttf?t=1649825054243') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 25px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
	.sousou_index{
		width: 100%;
		padding: 10px;
	}
	.skuan {
		display: flex;
		justify-content: space-around;
		background-color: #F7F7F7;
		width: 100%;padding: 5px;
		border-radius: 20px;
	}
	.top_soso{
		width: 100%;
	}
	.mian_body{
		margin-top: 15px;
	}
	.refs {
		margin-top: 10px;
		height: 100%;
		min-height: 600px;
		padding-bottom: 100px;
		background-color: #F7F7F7;
		overflow-y: scroll;
		padding: 0 10px 10px 10px;
	}
	.Bluse {
		display: inline-block;
		width: 47%;
		background-color: #fff;
		margin: 5px;
		border-radius: 10px;
	}
	.bian {
		position: relative;
		height: 110px;
		border-radius: 5px;
		overflow: hidden;
		text-align: center;
		padding: 2px;
	}
	.texts {
		margin: 10px;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		height: 100px;
	}
</style>
